<template>
  <div class="content">
    <div class="left">
      <div class="sideBar">
        <div class="hd">
          <em>全部书籍</em>
        </div>

        <div class="books-list" v-for="category in books.category" :key="category.name">
          <h3 class="title">{{ category.name }}</h3>
          <ul>
            <li v-for="book in category.list" :key="book">
              <a href="#">{{ book }}</a>
            </li>
          </ul>
        </div>

      </div>
    </div>
    <!-- right -->
    <div class="right">
      <div class="banner">
        <img src="../../../static/img/banner01.png" alt="">
      </div>
      <div class="products" v-for="goods in books.goods" :key="goods.id">
        <div class="imgBox">
          <img :src="('../../../static/img/' + goods.img)" alt="">
        </div>
        <div class="info">
          <h3>{{ goods.title }}</h3>
          <p>{{ goods.intro }}</p>
          <div class="btn">
            <router-link :to="goods.path">立即购买</router-link>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: 'BookstoreHome',

  data() {
    return {
      books: {
        category: [
          {
            name: "移动互联网开发专业书籍",
            list: ["Web标准网站设计之道",
              "PhotoShop商业网站设计",
              "C#编程基础",
              "SQL Server数据库基础",
              "C#桌面应用程序开发",
              "Java语言基础",
              "Java面向对象编程",
              "Java语言高级特性"]
          }, {
            name: "移动互联网应用专业书籍",
            list: ["计算机基础应用",
              "Linux系统管理",
              "企业网络互联技术",
              "Windows网络服务管理",
              "Windows系统管理",
              "Windows活动目录管理",
              "计算机网络技术"]
          }
        ],
        goods: [
          {
            id: 1,
            title: "移动互联网开发全套书籍",
            intro: "高端专业独享教材,突破传统教与学,合理利用碎片化学习时间。",
            path: "/detail/develop",
            img: "1.png"
          }, {
            id: 2,
            title: "移动互联网应用全套书籍",
            intro: "内含丰富的课程资源，面试题库等企业必备信息库。",
            path: "/detail/apply",
            img: "2.png"
          }, {
            id: 3,
            title: "大数据全套书籍",
            intro: "正在到来的数据革命，以及它如何改变政府、商业与我们的生活。",
            path: "/detail/bigdata",
            img: "3.png"
          }, {
            id: 4,
            title: "人工智能全套书籍",
            intro: "你对人工智能的一切疑问，好读易懂，有趣有料。。",
            path: "/detail/ai",
            img: "4.png"
          }
        ]
      },
    };
  },

  mounted() {

  },

  methods: {

  },
};
</script>

<style scoped>
.title {
  font-weight: 600;
}
</style>
